import React, { useState, useEffect, useRef } from 'react';
import { Toast, Dialog } from 'antd-mobile'
import HeadTop from '@/components/HeadTop';
import PickerSelect from '@/components/PickerSelect';
import FootButton from '@/components/FootButton';
import UploadPhotos from '@/components/UploadPhotos';
import Index from '@/api/hall';
import "./index.less"


function Detail (props) {
    const [basicColumns, setbasicColumns] = useState([
        [
            {
                label:"报修",
                value:'REPAIR'
            },
            {
                label:"临时维修任务",
                value:'TEMPORARY_REPAIR'
            },
        ]
    ]);  // 维修类型
    const [basicColumnsVal, setbasicColumnsVal] = useState('');
    
    const [detaiObj, setDetaiObj] = useState({ itemVoList: [] });
    const [sureButtonTxt, setSureButtonTxt] = useState("确认受理任务")
    const uploadRef = useRef()

    useEffect(() => {
        getInfoDetail()
    }, []);

    const getInfoDetail = () => {
        Index.devicedetail(props.location.state.no).then(res => {
            if (res.data.code) {
                Toast.show({
                    content: '请求失败:' + res.data.msg,
                })
                return
            }

            setDetaiObj(res.data.data)
            uploadRef.current && uploadRef.current.setPhotoListFinish(res.data.data?.photoUrl || [])
        })
    }

    const getSubmitSure = () => {
        Dialog.confirm({
            content: '确认受理维修任务',
            onConfirm: async () => {
                handleSubmit()
            },
        })
    }

    const handleSubmit = () => {
        if(!basicColumnsVal){
            Toast.show({
                content: '请选择维修类型',
            })
            return
        }
        let params = {
            no: detaiObj.no,
            repairTaskType: basicColumnsVal
        }
        let api = Index.accepted
        api(params).then(res => {
            if (res.data.code) {
                Toast.show({
                    content: '请求失败:' + res.data.msg,
                })
                return
            }
            Toast.show({
                content: '提交成功',
            })
            getSubmitCancel()
        })
    }

    const getSubmitCancel = () => {
        props.history.goBack(-1)
    }

    const setSelectVal = (val) => {
        console.log(val,'val');
        setbasicColumnsVal(val[0])
    }

    return (
        <div className='page-wrapper halldetail'>
            <HeadTop title="设备维修" history={props.history}></HeadTop>
            <div className="page-body">
                <div className="info">
                    <div className="d-title">维修单号:{detaiObj.no}</div>
                    <div className="info-main">
                        <div className="m-line">
                            <div className="m-name">设备类型：</div>
                            <div className="m-val">{detaiObj.deviceType}</div>
                        </div>
                        <div className="m-line">
                            <div className="m-name">设备编号：</div>
                            <div className="m-val">{detaiObj.deviceCode}</div>
                        </div>
                        <div className="m-line">
                            <div className="m-name">设备名称：</div>
                            <div className="m-val">{detaiObj.deviceName}</div>
                        </div>
                        <div className="m-line">
                            <div className="m-name">报修时间：</div>
                            <div className="m-val">{detaiObj.repairTime}</div>
                        </div>
                        <div className="m-line">
                            <div className="m-name">标准维修时间：</div>
                            <div className="m-val">{detaiObj.standardRepairTime}</div>
                        </div>
                    </div>
                </div>
                <div className="line">
                    <div className="d-title">设备故障描述</div>
                    <div className="reason-line">
                        {detaiObj.badReason}
                    </div>
                </div>
                <div className="line">
                    <div className="d-title">任务类型</div>
                    <PickerSelect
                        type="from"
                        placeholderTxt="请选择任务类型"
                        basicColumns={basicColumns}
                        defaultValue={detaiObj.repairTaskType}
                        setSelectVal={(e) => setSelectVal(e)}
                    ></PickerSelect>
                </div>
                {
                    detaiObj.status !== 'WAIT_FINISH' ?
                        <div className="photos">
                            <div className="d-title">上传故障图片</div>
                            <UploadPhotos ref={uploadRef} detaiObj={detaiObj} />
                        </div> : null
                }
            </div>
            {
                detaiObj.status != 'FINISH' ?
                    <FootButton cancelTxt="返回" sureTxt={sureButtonTxt} getSubmitCancel={getSubmitCancel} getSubmitSure={getSubmitSure}></FootButton> :
                    null
            }

        </div>
    );
}

export default Detail;
